<template>
    <div class="special_box">
        <!-- 轮播图 -->
        <div class="lunbo_box">
            <el-carousel :interval="5000" type="card" height="200px">
                <el-carousel-item v-for="item in 6" :key="item">
                    <!-- <h3 class="medium">{{ item }}</h3> -->
                    <img class="lunbotu" src="../../../assets/findMusic/lunbotu.png" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        
        <!-- 推荐 -->
        <div class="recomend">
            <p class="title">推荐歌单</p>
            <div class="music_list">
                <div class="list_box" v-for="item in recomend_list" :key="item.id">
                    <div class="list_top">
                        <span class="tag">
                            <p class="tag_num">{{item.play_num}}</p>
                            <img class="" src="../../../assets/findMusic/earphone.png" alt="">
                        </span>
                        <img class="musimg" :src="item.recom_img" alt="">
                    </div>
                    <p class="list_title">{{item.list_title}}</p>
                </div>
            </div>
        </div>

        <!-- 独家放送 -->
        <div class="dujia_box">
            <p class="title">独家放送</p>
            <div class="dujia_content">
                <div class="dujia" v-for="item in dujia_list" :key="item.id">
                    <img :src="item.list_img" alt="">
                    <p>{{item.list_title}}</p>
                </div>
            </div>
        </div>

        <!-- 最新音乐 -->
        <div class="newmusic">
            <h3>最新音乐</h3>
            <div class="musicBox">
                <div class="new_content" v-for="(item, i) in music_msg" :key="item.id">
                    <p class="num">{{++i}}</p>
                    <span class="middle">
                        <img class="play" src="../../../assets/findMusic/play.png" alt="">
                        <img class="music_img" :src="item.music_img" alt="">
                    </span>
                    <span class="music_msg">
                        <p class="music_name" style="margin-bottom:10px">{{item.music_name}}</p>
                        <p class="music_singer">{{item.music_singer}}</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            recomend_list: [
                { id: 1, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 2, list_title: "饶舌先生 | 街头酷盖另一潮流", play_num: "498789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 3, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 4, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 5, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 6, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 7, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 8, list_title: "饶舌先生 | 街头酷盖另一潮流", play_num: "498789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 9, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 10, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 11, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 12, list_title: "运动派电音 | 我的电子永不停", play_num: "398789", recom_img: require("../../../assets/findMusic/jinxia.jpg") },
            ],
            dujia_list: [
                { id: 1, list_title: "一周热门速报 E19李荣浩发9字神曲 “呵呵”对决《贝贝》", list_img: require("../../../assets/findMusic/lunbotu.png") },
                { id: 2, list_title: "一周热门速报 E19李荣浩发9字神曲 “呵呵”对决《贝贝》", list_img: require("../../../assets/findMusic/lunbotu.png") },
                { id: 3, list_title: "一周热门速报 E19李荣浩发9字神曲 “呵呵”对决《贝贝》", list_img: require("../../../assets/findMusic/lunbotu.png") },
            ],
            music_msg: [
                { id: 1, music_name: "解救一切的答案", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 2, music_name: "愿", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 3, music_name: "贝加尔湖畔", music_singer: "李建", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 4, music_name: "解救一切的答案", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 5, music_name: "愿", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 6, music_name: "贝加尔湖畔", music_singer: "李建", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 7, music_name: "解救一切的答案", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 8, music_name: "愿", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 9, music_name: "贝加尔湖畔", music_singer: "李建", music_img: require("../../../assets/findMusic/jinxia.jpg") },
                { id: 10, music_name: "愿", music_singer: "周深", music_img: require("../../../assets/findMusic/jinxia.jpg") },
            ],
        }
    },
}
</script>

<style>
.special_box{
    height: 686px; overflow: auto;
}
.lunbo_box{
    width: 800px;
    margin: 15px auto;
}

.is-active{
    color: #008000;
}

.el-carousel{
    position: absolute;
    z-index: 3!important;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.el-carousel__item img{
    height: 200px;
    width: 400px;
    cursor: pointer;
}


.recomend{
    width: 800px;
    margin:15px auto;
}

.title{
    font-size: 14px;
    font-weight: 200;
    margin-bottom: 8px;
}

.music_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.list_box{
    width: 120px;
    position: relative;
    cursor: pointer;
}

.tag{
    position: absolute;
    left: 0;
    right: 0;
    width: 120px;
    background-image: url('../../../assets/findMusic/tag.png');
    overflow: hidden;
}

.tag img{
    float: right;
    width: 16px;
    height: 16 px;
    margin-right: 5px;
}

.tag_num{
    float: right;
    font-size: 12px;
    margin-right: 5px;
}

.musimg{
    width: 120px;
    height: 120px;
}

.list_title{
    font-size: 12px;
    font-weight: 200;
    margin-bottom: 15px;
}

.dujia_box{
    width: 800px;
    margin:15px auto;
}

.dujia_content{
    display: flex;
    justify-content: space-between;
}
.dujia img{
    width: 250px;
    height: 100px;
}

.dujia p{
    width: 240px;
    font-size: 12px;
    font-weight: 200;
}

/* 最新音乐 */
.newmusic{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.newmusic h3{
    width: 800px;
    border-bottom: 1px solid #676769;
    font-weight: bold;
    margin-bottom: 15px;
}

.musicBox{
    display: flex;
    justify-content: baseline;
    flex-wrap: wrap;
}

.new_content{
    display: flex;
    justify-content: baseline;
    padding-left: 20px ;
    width: 350px;
    cursor: pointer;
}

.num{
    font-family: "宋体";
    font-size: 12px;
    font-weight: 200px;
    width: 12px;
    height: 12px;
    margin-top: 27px;
    margin-right: 13px;
}

.middle{
    position: relative;
    width: 50px;
    height: 50px;
}

.music_img{
    position: relative;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
}

.play{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -8px;
    margin-left: -8px;
    width: 16px;
    height: 16px;
    z-index: 3;
}

.music_msg{
    height: 50px;
    padding: 5px;
    align-items:center;
}

.music_msg p{
    font-family: "宋体";
    font-size: 12px;
    font-weight: 200px;
}

</style>